.fancybox__container[theme="light"] {
  --fancybox-backdrop-bg: rgba(240, 240, 240, 0.8);
  --f-button-bg: rgba(220, 220, 220, 0.75);
  --f-arrow-bg: rgba(220, 220, 220, 0.65);
  backdrop-filter: blur(4px);
  opacity: 0.96;
}

.dark .fancybox__container {
  --fancybox-color: #dbdbdb;
  --fancybox-backdrop-bg: rgba(24, 24, 27, 0.8);
  --f-toolbar-color: #ddd;
  --f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  --f-toolbar-font-weight: 500;
  --f-html-color: #222;
  --f-html-bg: #fff;
  --f-error-color: #fff;
  --f-error-bg: #333;
  --f-video-bg: #333;
  --f-caption-color: var(--fancybox-color, #dbdbdb);
  --f-spinner-color-1: rgba(255, 255, 255, 0.2);
  --f-spinner-color-2: rgba(255, 255, 255, 0.8);
  --f-spinner-border-width: 4px;
  --f-progressbar-color: rgba(255, 255, 255);
  --f-button-color: #ddd;
  --f-button-hover-color: #fff;
  --f-button-outline-color: rgba(255, 255, 255, 0.75);
  --f-button-bg: rgba(54, 54, 54, 0.75);
  --f-button-svg-stroke-width: 1.75;
  --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.01)),
    drop-shadow(1px 2px 1px rgba(24, 24, 27, 0.05));
  --f-arrow-bg: rgba(54, 54, 54, 0.65);
  --f-arrow-color: #ddd;
  --f-arrow-hover-color: #fff;
  --f-arrow-svg-stroke-width: 2;
  --f-close-button-color: #fff;
  --f-close-button-hover-color: #fff;
  --f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
  --f-thumb-selected-shadow: inset 0 0 0 2px #fff;
}
